<template>
  <div class="table">
    <el-form
      ref="ruleFormRef"
      style="margin-top: 20px"
      label-position="top"
      size="small"
      :model="formData"
      :disabled="disabled"
    >
      <el-table style="width: 100%" :data="formData.tableData" border stripe>
        <template v-if="formData.tableData[0]">
          <el-table-column
            label="序号"
            align="center"
            type="index"
            width="80px"
          />
          <el-table-column label="风险权重" prop="elements" align="center" />
          <el-table-column label="U" prop="UIndex" align="center" />
        </template>
        <el-table-column
          v-for="(item, index) in getTableModel"
          :key="item.prop || index"
          :type="item.type"
          :fixed="item.fixed"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :align="item.align || 'center'"
        >
          <template slot-scope="scope">
            <template v-if="item.slot == 'text'">
              <span>{{ scope.row[item.prop] }}</span>
            </template>
            <template v-else-if="item.slot">
              <slot
                :name="item.slot"
                :rowInfo="scope.row"
                :value="scope.row[item.prop]"
                :index="scope.$index"
                :scope="scope"
              />
            </template>
            <template v-else>
              <span v-if="scope.$index === index">1</span>
              <el-form-item
                v-else
                :prop="'tableData.' + scope.$index + '.' + item.prop"
                :rules="$validate.required()"
              >
                <el-input
                  class="matrix-input"
                  v-model="scope.row[item.prop]"
                  @change="
                    inputChange(scope.$index, index, scope.row[item.prop])
                  "
                />
              </el-form-item>
            </template>
          </template>
        </el-table-column>
        <el-table-column v-if="formData.tableData[0]" label="W" prop="w" align="center" />
      </el-table>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => ({
        tableData: [],
      }),
    },
    matrixNumber: {
      type: Number,
      default: 5,
    },
    tableModel: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {

    };
  },
  computed: {
    getTableModel() {
      let arr = [];
      for (let i = 0; i < this.matrixNumber; i++) {
        arr.push({
          prop: `${i}`,
          label: `U${i + 1}`,
        });
      }
      return arr;
    },
    formateLabel() {
      return (label) => {
        return label === undefined || label === '' ? '' : label;
      };
    },
  },
  methods: {
    inputChange(horizontalIndex,verticalIndex,value) {
      if(value){
        this.formData.tableData[verticalIndex][`${horizontalIndex}`] = (1 / value).toFixed(5) * 100000 / 100000
      }
    },
    async checkValidate(){
      try {
        await this.$validate.checkValidate(this.$refs.ruleFormRef);
        return true
      } catch (error) {
        return false
      }
    },
    async outValue(){
      const validRes = await this.checkValidate()
      if(validRes){
          const arr = []
        this.formData.tableData.forEach((item,index) => {
          let childArr = []
          for (const key in item) {
            if(!isNaN(Number(key))){
              childArr[Number(key)] = Number(item[key]) || 1
            }
          }
          arr[index] = childArr
        });
        return arr
      } else {
        this.$message.error('请填写矩阵所有值！')
        return false
      }
      
    }
  },
};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0px !important;
}
::v-deep {
  .matrix-input {
    .el-input__inner {
      text-align: center;
    }
  }
}
</style>
